<template>
  <div class="card-upload">
    
    <el-upload
      :action="uploadUrl"
      class="avatar-uploader"
      :show-file-list="false"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :before-upload= "beforeUpload"
      >
      <img v-if="!imageUrl && type == 'idCardImgz'" class="card-icon" src="../assets/top.png" alt="">
      <img v-if="!imageUrl && type == 'idCardImgb'" class="card-icon" src="../assets/back.png" alt="">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-if="!imageUrl" class="el-icon-plus id-icon"></i>
        
    </el-upload>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog> -->
  </div>
</template>
<script>
  export default {
    props: {
      type: {
        type: String,
      }
    },
    data() {
      return {
        uploadUrl: this.$url.uploadUrl,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
        imageUrl: ''
      };
    },
    mounted() {
      
    },
    methods: {
       /**
       * 初始化图片
       */
      initImg(url) {
        this.imageUrl = url;
      },
      handleRemove(file) {
        console.log(file);
        this.fileList = [];

      },
      beforeUpload(files, fileList) {
        console.log(files, fileList);
      },
      handleExceed(files, fileList) {
          debugger;
          this.fileList = [];
        //this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      handleSuccess(res) {
        this.imageUrl = this.$url.fileUrl + res.fileName;
        let data = {
          type: this.type, 
          fileUrl: res.fileName
        };
        this.$emit('savefileFun', data);
      }
    }
  }
</script>
<style scoped>
  .avatar-uploader img {
    height: 100%;
  }
  .card-upload {
    border: 1px dashed #cdcdcd;
    border-radius: 3px;
    padding: 10px;
  }
   .avatar-uploader >>> .el-upload,
  .card-upload .avatar-uploader {
    width: 100%;
    height: 100%;
  }
  
  .card-upload >>> .el-icon-plus {
    position: absolute;
    top: 70px;
    right: 170px;
    font-size: 30px;
    color: #aaa;
  }
  .card-upload {
    width: 350px;
    height: 168px;
    padding: 15px;
    background: #fff;
  }
  /* .card-upload >>> .el-upload-list--picture-card .el-upload-list__item {
    width: 350px;
    height: 180px;
  } */
</style>
